<template>
  <div>
    <div class="article-list-show" v-loading.fullscreen.lock="loading"></div>
    <!-- 标题 -->
    <div class="article-inner">
      <label>{{this.title}}</label>
      <p>{{this.catelog}} / 更新于 {{this.time}} / {{this.commont}} 条评论</p>
    </div>

    <!-- 内容 -->
    <div class="markdown-body" v-html="this.context"  ></div>


    <!-- 发布评论 -->
    <div class="release-commont">
      <!-- 头像 -->
      <el-avatar  :src="avatar"></el-avatar>
      <!-- 输入框 -->
      <el-input
        type="text"
        maxlength="300"
        show-word-limit
        placeholder="这么好的文章,评论评论呗..."
        v-model="articleCommont.input"
        :style="{margin:'0px 10px'}"
        @input="changeButton"
        clearable>
      </el-input>
      <!-- 发表按钮 -->
      <el-button type="danger" :disabled="!buttonShow" @click="commentRelease">评论</el-button>
    </div>

    <!-- 评论 -->
    <div v-for="item in commontList"  :key="item.id" >
      <el-divider></el-divider>
      <div class="article-comment">
        <!-- 头像 -->
        <div>
          <el-avatar size="small" :src="item.user.avatar"></el-avatar>
        </div>
        <div>
          <!-- 名字 -->
          <span><el-link type="success" :underline="false" @click="tomain(item.user.id)"><strong>{{item.user.username}}：</strong></el-link></span>
          <!-- 点赞图标 -->
          <span class="likeIcon"><el-link type="danger" :underline="false"><i class="iconfont">&#xe664;</i>&nbsp;1</el-link></span>
        </div>
      </div>
      <!-- 评论内容 -->
      <div class="commont-content">
        <span>{{item.commentContent}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import 'github-markdown-css/github-markdown.css'
  import marked from 'marked'
  import API from '@/api/user'
  import mixins from '@/mixins.js'
  import {formatDate} from '@/common/utils.js'
  import CommontAPI from '@/api/Commont.js'
  export default {
    mixins:[mixins],
    name : 'MainContent',
    data() {
      return {
          loading:true,
          content:'',
          id:'',
          time:'',
          title:'',
          context:'',
          catelog:'',
          context:'',
          commont:0,
          buttonShow:false,
          avatar:'',
          //发布
          articleCommont:{
            userId:'',
            input:'',
            articleId:''
          },
        //评论列表
        commontList:[

        ]
      }
    },
    methods:{
      changeButton(){
        if(this.articleCommont.input != ''){
          this.buttonShow = true
        }else{
          this.buttonShow = false
        }
      },
      tomain(id){
        this.$router.push({
          path:"/user/main/"+id
        })
      },
      commentRelease(){
        //判断用户是否登录
        if(this.isLogin){
          CommontAPI.commentRelease(this.articleCommont).then(res => {
              if(res.data.isSuccess){
                this.commontList.push({
                  user:{
                    avatar:res.data.userInfo.avatar,
                    username:res.data.userInfo.username,
                  },
                  commentContent:this.articleCommont.input
                })
                this.articleCommont.input = ''
              }
          })
        }else{
          this.$message({
            showClose: true,
            message:"请先登录，再来评论",
            type:'error',
             center: true
          })
        }
      }
    },
    created() {
      // 获取文章id
      this.articleCommont.articleId = this.$route.params.id

      API.selectArticleById(this.articleCommont.articleId).then(res => {
        this.loading = false
        this.content = res.data
        this.time = formatDate(res.data.article.createTime,"yyyy-MM-dd hh:mm:ss")
        this.title = res.data.article.title
        this.catelog = res.data.catalog.articleCatalog
        this.context = res.data.article.context
        this.commont = res.data.commonts.length
        this.commontList = res.data.commonts
        console.log(res.data)
      })

      //头像
      this.avatar = JSON.parse(localStorage.getItem("UserInfo")).avatar
      //用户id
      this.articleCommont.userId = this.UserInfo.id
    }
  }
</script>

<style scoped="scoped">
  .markdown-body {
   box-sizing: border-box;
    min-width: 200px;
    width: 100%;
    max-width: 980px;
    padding: 45px;
    max-width: 98%;
    margin: 0 auto;
    box-shadow: 1px 3px 6px gray;
    padding-left: 20px;
    padding-right: 15px;
    padding-top: 40px;
    padding-bottom: 45px;
    margin-bottom: 30px
  }
  .article-inner{
    height: 400px;
    width: 100%;
    text-align: center;
    color: #FFFFFF;
    background-size: 100% 100%;
    background-image: url(../../../../static/1.jpg);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .article-inner label{
    font-size: 2rem;
  }

  .article-comment{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px 10px;
  }
  .article-comment div:nth-child(1){
    margin: 1px 5px;
  }
  .article-comment div:nth-child(2){
    margin: 1px 10px;
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .commont-content{
    margin: 0px 10px 5px 70px;
  }

  .release-commont{
    display: flex;
    justify-content: space-between;
    margin: 20px 10px;
  }
  .likeIcon a{
      color: #909399;
  }

</style>
